<template>
  <div class="chat-content" ref="listRef">
    <!-- 空消息界面 -->
    <div v-if="!messageList.length">
      <div class="chat-message">
        <div class="time">{{ getDate(Date.now(), 'HH:mm') }}</div>
        <div class="bubble-box">
          <div class="avatar">
            <svg-icon name="chat-ai" size="24" />
          </div>
          <div class="bubble ai">
            嗨～你好呀！欢迎来到【证书宝AI聊天室】
            <br />
            我是你的AI助手小证，随时在线为你解答各种 问题～
          </div>
        </div>
      </div>
    </div>
    <!-- 对话消息界面 -->
    <div class="chat-list" v-else>
      <div v-for="msg in messageList" :key="msg.id" :class="['chat-message', { streaming: msg.isStreaming }]">
        <div class="time" v-if="msg.showTime">{{ getDate(msg.timestamp, 'HH:mm') }}</div>
        <!-- 对话框 -->
        <div class="bubble-box">
          <div class="avatar" v-if="!msg.isUser">
            <svg-icon name="chat-ai" size="24" />
          </div>
          <div
            :class="['bubble', msg.isUser ? 'user' : 'ai']"
            :style="!msg.isUser && msg.content.length > 100 ? 'width: 100%' : ''"
          >
            <!-- 使用 v-html 渲染格式化后的内容 -->
            <template v-if="!msg.isUser">
              <template v-if="!msg.content && msg.isStreaming">
                <div class="thinking">
                  <el-icon size="18" color="#409eff" class="is-loading">
                    <svg-icon size="18" name="thinking" />
                  </el-icon>
                  思考中...
                </div>
              </template>
              <template v-else-if="!msg.content && !msg.isStreaming">
                <div>抱歉，服务繁忙，请稍后再试。</div>
              </template>
              <template v-else>
                <Typewriter :content="msg.content" :typing="isStreaming" :is-markdown="true" />
              </template>
            </template>
            <template v-else>
              {{ msg.content }}
            </template>
          </div>
        </div>
      </div>
      <!-- 返回顶部 -->
      <el-button size="large" circle plain class="back-to-bottom" v-if="showBackToBottom" @click="scrollToBottom">
        <el-icon color="#2d38ff" class="is-loading" size="40">
          <svg-icon class="bottom-bg" name="bottom-bg" size="40" />
        </el-icon>
        <el-icon color="#2d38ff" size="24">
          <svg-icon name="bottom" size="24" />
        </el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup>
  import { ref, defineProps, watch, onMounted } from 'vue';
  import getDate from '@/utils/getDate';
  import useAutoScroll from '@/utils/useAutoScroll';
  // 导入element-plus-x 的typewriter组件
  import { Typewriter } from 'vue-element-plus-x';
  const props = defineProps({
    messageList: {
      type: Array,
      default: [],
    },
    isStreaming: {
      type: Boolean,
      default: false,
    },
  });
  // 消息容器的DOM引用（用于自动滚动）
  const listRef = ref(null);
  const autoScrollInstance = useAutoScroll(listRef);
  const { isNearBottom, scrollToBottom } = autoScrollInstance;
  onMounted(() => {
    autoScrollInstance.stop();
  });
  watch(
    () => props.isStreaming,
    isStreaming => {
      if (isStreaming) {
        autoScrollInstance.start();
      } else {
        autoScrollInstance.stop();
      }
    },
    { deep: true }
  );
  const showBackToBottom = ref(false);

  watch(isNearBottom, nearBottom => {
    showBackToBottom.value = !nearBottom;
  });
</script>

<style lang="scss" scoped>
  .chat-content {
    position: relative;
    margin: 30px 0;
    padding: 0 40px;
    padding-bottom: 50px;
    height: 410px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      width: 6px;
      background-color: #08b9f4;
    }
  }
  // 每条对话信息
  .chat-message {
    position: relative;
    + .chat-message {
      margin-top: 20px;
    }
    .time {
      margin-bottom: 24px;
      text-align: center;
      color: #94a3b8;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px;
      letter-spacing: -0.0848px;
    }
    /* 流式消息特殊样式 */
    &.streaming .message {
      white-space: pre-wrap;
      /* 保留空白符 */
    }
  }
  // 对话信息内容
  .bubble-box {
    position: relative;
    display: flex;
  }
  .avatar {
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: 12px;

    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient(112deg, #2f41ff 10.07%, #6792ff 51.5%, #8fecff 92.92%),
      linear-gradient(90deg, #02a4fe 0%, #7d40ff 100%);
  }
  .bubble {
    padding: 11px 15px;
    border-radius: 12px;
    color: #fff;
    // font-family: 'PingFang SC';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    &.ai {
      max-width: calc(100% - 56px);
      margin-right: auto;
      border: 1px solid #6c77a1;
      border-bottom-left-radius: 0;
      background: linear-gradient(128deg, rgba(61, 68, 99, 0.88) -0.01%, rgba(29, 37, 59, 0.88) 99.98%);
    }
    &.user {
      max-width: 90%;
      margin-left: auto;
      border-bottom-right-radius: 0;
      background: linear-gradient(112deg, #2f41ff 10.07%, #6792ff 51.5%, #8fecff 92.92%),
        linear-gradient(90deg, #02a4fe 0%, #7d40ff 100%);
    }
    .thinking {
      display: flex;
      align-items: center;
      .is-loading {
        margin-right: 8px;
      }
    }
  }
  :deep(.bubble) {
    ol,
    ul {
      padding-left: 20px;
    }
    details {
      + * {
        margin-top: 8px;
      }
    }
    summary {
      outline: none;
      cursor: pointer;
    }
    pre {
      overflow-x: auto;
      scrollbar-gutter: stable;

      color: #fff;
      background: 0 0;
      text-shadow: 0 -0.1em 0.2em #000;
      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      font-size: 1em;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      word-wrap: normal;
      line-height: 1.5;
      -moz-tab-size: 4;
      -o-tab-size: 4;
      tab-size: 4;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;

      padding: 1em;
      margin: 0.5em 0;
      overflow: auto;
      border: 0.3em solid #7a6651;
      border-radius: 0.5em;
      box-shadow: 1px 1px 0.5em #000 inset;

      &::-webkit-scrollbar {
        height: 5px;
        width: 5px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.2);
      }
    }
    hr {
      margin: 5px 0;
    }
    *:not(div):not(:last-child) {
      margin-bottom: 5px;
    }
    h1 {
      font-size: 22px;
    }
    h2 {
      font-size: 20px;
    }
    h3 {
      font-size: 18px;
    }
    h4 {
      font-size: 17px;
    }
    h5 {
      font-size: 16px;
    }
    h6 {
      font-size: 15px;
    }
    p {
      padding-left: 0.5em;
    }
  }
  .back-to-bottom {
    position: sticky;
    left: 50%;
    bottom: -20px;
    opacity: 0.8;
    .is-loading {
      position: absolute;
      top: 0;
      left: 0;
      .bottom-bg {
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(200deg) brightness(118%) contrast(119%);
      }
    }
  }
</style>
